<template>
 <div class="message-video">
    <div class="message-video-box">
     <VideoPlay v-model="videoInfo"/>
    </div>
	</div>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs, ref } from 'vue';
import VideoPlay from "@/components/VideoPlay/index.vue";

export default defineComponent({
  components: {
    VideoPlay
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
		messageData: {
			type: Object,
			default: () => {
				return {};
			}
		}
  },
  setup(props:any, ctx:any) {
    const data = reactive({
      video: {},
			message: {},
      show: false,
			videoContext: null
    });
    /** 视频数据 */
    const videoInfo = ref({
      videoUrl: '',
      coverUrl: '',
    });
    watchEffect(()=>{
      data.video = props.data;
			data.message = props.messageData;
      videoInfo.value.videoUrl = props.data.url;
      videoInfo.value.coverUrl = props.data.snapshotUrl;
    });
    
    const toggleShow = () => {
      // videoInfo.value.videoUrl = data.video.url;
      // videoInfo.value.coverUrl = data.video.snapshotUrl;
    };
    return {
      ...toRefs(data),
      videoInfo,
      toggleShow,
    };
  }
});
</script>
<style lang="scss" scoped>
.message-video {
  position: relative;
  &-box {
		width: 120px;
    max-width: 120px;
		background-color: rgba(#000000, 0.3);
		border-radius: 6px;
		min-height: 120px;   // todo 优化高度动态获取
  }
}
</style>
